<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书-图书列表</title>
    <link rel="icon" href="/static/images/t_logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/lyk-global.css" />
    <link rel="stylesheet" href="/static/elementui/lib/theme-chalk/index.css">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/requestApi.js" type="text/javascript"></script>
    <script src="/static/js/vue/vue.js"></script>
    <!-- 引入elementui -->
    <script src="/static/elementui/js/element.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/axios-config.js"></script>
    <script src="/static/js/utilJs.js"></script>
</head>
<style>
    *{
        font-size: 14px
    }
    [v-cloak] {
        display: none;
    }
</style>
<body style="background-color: #fff">
<div id="app" v-cloak>
    <div class="mt-8 ml-4">
        <div class="df-aic ">
            <el-input placeholder="请输入书籍名称" size="small" style="width:200px;" class="ml-2" v-model="queryParam.bookName" @keyup.native.enter="getTableDataMethod(true)"></el-input>
            <el-input placeholder="请输入isbn" size="small" style="width:200px;" class="ml-2" v-model="queryParam.isbn" @keyup.native.enter="getTableDataMethod(true)" class="ml-2"></el-input>
            <el-input placeholder="请输入条码号" size="small" style="width:200px;" class="ml-2" v-model="queryParam.ticketNumber" @keyup.native.enter="getTableDataMethod(true)" class="ml-2"></el-input>
            <el-select v-model="queryParam.typeId" placeholder="请选择父类型" size="small" filterable style="width:200px;" clearable class="ml-2">
                <el-option
                        v-for="item in allTypeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-button type="primary" size="small" class="ml-2" @click="getTableDataMethod(true)">搜索</el-button>
        </div>
        <el-table :data="tableData" v-loading="tableDataLoading" class="mt-4">
            <el-table-column prop="id" label="书籍编号" width="150"></el-table-column>
            <el-table-column prop="bookName" label="名称">
                <template slot-scope="scope">
                    <span class="copy-a" @click="jumptoBookDetail(scope.row.id)">{{scope.row.bookName}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="typeName" label="书籍类型"></el-table-column>
            <el-table-column prop="author" label="作者"></el-table-column>
            <el-table-column prop="publish" label="出版社"></el-table-column>
            <el-table-column prop="isbn" label="isbn"></el-table-column>
<!--            <el-table-column prop="stock" label="库存"></el-table-column>-->
            <el-table-column prop="picUrl" label="封面">
                <template slot-scope="scope">
                    <img :src="'/book/getLocalSystemPic?filePath=' + scope.row.picUrl" alt="Smiley face" width="42" height="42" v-if="scope.row.picUrl">
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="small" @click="jumpToEdiBookMethod(scope.row)" class="mb-2">编辑</el-button>
                    <el-button size="small" type="primary" @click="showStockDialog(scope.row)" class="mb-2">库存管理</el-button>
                    <el-popconfirm :title='"是否删除图书编号为"+scope.row.id+"的数据？"'
                                   @confirm="deleteBookMethod(scope.row)">
                        <el-button slot="reference" type="danger" size="small" v-loading="deleteLoading"  class="mt-2">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>


    <el-pagination background layout="total,sizes,prev, pager, next" :total="tableDataPaging.total"
                   :page-sizes="[10, 20, 50]"
                   prev-text="上一页" next-text="下一页"
                   :page-size="tableDataPaging.pageSize"
                   :current-page="tableDataPaging.currentPage"
                   @current-change="tableDataPagingChange"
                   @prev-click="tableDataPagingChange" @next-click="tableDataPagingChange"
                   @size-change="tableDataPagingSizeChange"
                   style="float:right;margin-top: 40px;padding-bottom:50px;">
    </el-pagination>

    <!--库存管理的对话框-->
    <el-dialog :title="stockManageDialogTitle + ' 库存管理'" :visible.sync="stockManageDialogVisible" width="1200px" :close-on-click-modal="false" append-to-body	>
        <div >
                <el-select size="small" style="width:118px;" v-model="bookStockQueryParam.status" placeholder="请选择状态" class="mr-2 mb-1" clearable @change="getBookStockByBookIdMethod(true)">
                    <el-option v-for="item in bookStockStatusOptions" :key="item.id" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-table :data="stockTableData" v-loading="stockTableDataLoading">
                    <el-table-column label="索书号" prop="indexBookNumber">
                        <template slot-scope="scope">
                            <el-input size="small" placeholder="请输入索书号" v-model="scope.row.indexBookNumber"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="条码号" prop="ticketNumber">
                        <template slot-scope="scope">
                            <el-input size="small" placeholder="请输入条码号" v-model="scope.row.ticketNumber"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="排架号" prop="shelfMark">
                        <template slot-scope="scope">
                            <el-input size="small" placeholder="请输入排架号" v-model="scope.row.shelfMark"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="所在馆位置" prop="placeLocation">
                        <template slot-scope="scope">
                            <el-input size="small" placeholder="请输入所在馆位置" v-model="scope.row.placeLocation"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" prop="status">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status == '3'">借出</span>
                            <span v-if="scope.row.status == '2'">在馆</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" >
                        <template slot-scope="scope">
                            <el-button size="small" type="primary" @click="saveStockMethod(scope.row)">保存</el-button>
                            <el-button size="small" type="danger" @click="deleteStock(scope.row,scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background layout="total,sizes,prev, pager, next" :total="stockTableDataPaging.total"
                               :page-sizes="[10, 20, 50]"
                               prev-text="上一页" next-text="下一页"
                               :page-size="stockTableDataPaging.pageSize"
                               :current-page="stockTableDataPaging.currentPage"
                               @current-change="stockTableDataPagingChange"
                               @prev-click="stockTableDataPagingChange" @next-click="stockTableDataPagingChange"
                               @size-change="stockTableDataPagingSizeChange"
                               style="float:right;margin-top: 40px;padding-bottom:50px;">
                </el-pagination>
        </div>

        <div class="df-aic-jcc mt-9 mb-9">
            <el-button @click="addStockMethod">添加一行</el-button>
            <el-button size="small" class="ml-6" @click="stockManageDialogVisible = false">取消</el-button>
        </div>

    </el-dialog>

</div>
</body>

<script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
        components: {
        },
        data() {
            return {
                queryParam : {
                    bookName:"",
                    typeId:"",
                    isbn:"",
                    ticketNumber:""
                },
                tableData : [],
                tableDataLoading : false,
                tableDataPaging : {
                    currentPage : 1,
                    pageSize : 10,
                    total : 0,
                },
                deleteLoading : false,
                addOrEditTypeDialogVisible : false,
                addOrEditTypeForm : {
                    id : "",
                    name : "",
                    parentId : ""
                },
                allTypeList:[],
                stockManageDialogTitle:"",
                stockManageDialogVisible:false,
                stockTableData:[],
                stockTableDataPaging : {
                    currentPage : 1,
                    pageSize : 10,
                    total : 0,
                },
                stockManageBookId:"",
                stockTableDataLoading:false,
                bookStockStatusOptions:[],
                bookStockQueryParam:{
                    status:""
                }
            }
        },
        mounted() {
            let that = this;
            this.$nextTick(function () {
                getDicTSysdicMethodEL("book_stock_status","bookStockStatusOptions",that);
                this.getTableDataMethod();
                this.getAllTypeListMethod();
            });
        },
        methods: {
            tableDataPagingChange(val) {
                let that = this;
                that.tableDataPaging.currentPage = val;
                that.getTableDataMethod();
            },
            tableDataPagingSizeChange(val) {
                let that = this;
                that.tableDataPaging.pageSize = val;
                that.getTableDataMethod();
            },

            //获取表格的数据
            getTableDataMethod(isChongZhi){
                let that = this;
                if (isChongZhi) {
                    this.tableDataPaging.currentPage = 1;
                }
                const {bookName,isbn,ticketNumber} = this.queryParam
                let queryData = {
                    bookName: $.trim(bookName),
                    isbn: $.trim(isbn),
                    ticketNumber: $.trim(ticketNumber),
                    pageNum: this.tableDataPaging.currentPage,
                    pageSize: this.tableDataPaging.pageSize,
                }
                this.tableDataLoading = true;
                that.tableData = [];
                axios.post('/book/getBookList', queryData)
                    .then(result => {
                        let res = result.data;
                        this.tableDataLoading = false;
                        if (res.code === 0) {
                            that.tableData = res.data.list;
                            that.tableDataPaging.total = res.data.total;
                        }
                    }).catch(error => {
                    that.$message.error("error");
                    this.tableDataLoading = false
                })
            },





            //获取所有的图书类型的数据
            getAllTypeListMethod(){
                let that = this;
                that.allTypeList = [];
                requestApiTB("type/getAllTypeList",{}, "POST", function(res){
                    if(res.code === 0){
                        that.allTypeList = res.data;
                    }
                });
            },

            jumpToEdiBookMethod(row){
                window.open("addOrEditBook.html?id=" + row.id);
            },

            //删除书籍
            deleteBookMethod(row){
                let that = this;
                if(!row.id){
                    that.$message.error("尚无id");
                    return;
                };
                that.deleteLoading = true;
                requestApiTB("book/delBook",{"id" : row.id}, "POST", function(res){
                    that.deleteLoading = false;
                    if(res.code === 0){
                        alert("删除成功");
                        //that.$message.success("删除成功");
                        that.getTableDataMethod(true);
                    }else{
                        that.$message.error(res.msg);
                    }
                });
            },

            //展示库存管理的对话框
            showStockDialog(row){
                let that = this;
                that.stockManageDialogTitle = row.bookName;
                that.stockManageBookId = row.id;
                that.stockManageDialogVisible = true;
                that.stockTableData = [];
                Object.assign(this.$data.bookStockQueryParam,this.$options.data().bookStockQueryParam);
                this.$nextTick(function () {
                    setTimeout(function () {
                        that.getBookStockByBookIdMethod();
                    }, 200);
                });
            },

            //添加库存的方法
            addStockMethod(){
                let that = this;
                let addObject = {
                    "bookId": that.stockManageBookId,
                    "indexBookNumber":"",
                    "ticketNumber":"",
                    "status":"",
                    "shelfMark":"",
                    "placeLocation":""
                };
                if(that.stockTableData.length > 0){
                    let deepCopyForm = JSON.parse(JSON.stringify(that.stockTableData[that.stockTableData.length-1]));
                    addObject.indexBookNumber = deepCopyForm.indexBookNumber;
                    addObject.shelfMark = deepCopyForm.shelfMark;
                    addObject.placeLocation = deepCopyForm.placeLocation;
                }

                that.stockTableData.push(addObject);
            },

            //删除库存
            deleteStock(row,index){
                let that = this;
                if(row.id){//如果有id
                    that.stockTableDataLoading = true;
                    requestApiTB("book/stock/delBookStockById",{"id":row.id},'POST',function(res){
                        that.stockTableDataLoading = false;
                        if(res.code === 0){
                            alert("删除成功");
                            that.stockTableData.splice(index, 1);
                        }else{
                            that.$message.error(res.msg);
                            return;
                        }
                    });
                }else{
                    that.stockTableData.splice(index, 1);
                }
            },

            //保存库存的方法
            saveStockMethod(row,index){
                let that = this;
                if(!row.bookId){
                    that.$message.error("请传递书籍id");
                    return;
                }

                let submitData = {
                    id : row.id,
                    bookId : row.bookId,
                    indexBookNumber : $.trim(row.indexBookNumber),
                    ticketNumber : $.trim(row.ticketNumber),
                    status : row.status,
                    shelfMark : $.trim(row.shelfMark),
                    placeLocation : $.trim(row.placeLocation)
                };
                that.stockTableDataLoading = true;
                requestApiTB("book/stock/saveBookStockByBookId",submitData,'POST',function(res){
                    that.stockTableDataLoading = false;
                    if(res.code === 0){
                        that.$message.success("操作成功");
                        setTimeout(function(){
                            that.getBookStockByBookIdMethod(row.bookId);
                        }, 500);

                    }else{
                        that.$message.error(res.msg);
                    }
                });

            },

            //获取图书的库存信息
            getBookStockByBookIdMethod(isChongZhi){
                let that = this;
                if (isChongZhi) {
                    this.stockTableDataPaging.currentPage = 1;
                }
                let queryData = {
                    "bookId" : that.stockManageBookId,
                    "status": that.bookStockQueryParam.status,
                    pageNum: this.stockTableDataPaging.currentPage,
                    pageSize: this.stockTableDataPaging.pageSize,
                }
                that.stockTableData = [];
                that.stockTableDataLoading = true;
                requestApiTB("book/stock/getBookStockListByBookId",queryData,'POST',function(res){
                    that.stockTableDataLoading = false;
                    if(res.code === 0){
                        that.$message.success("查询成功");
                        that.stockTableData = res.data.list;
                        that.stockTableDataPaging.total = res.data.total;
                    }else{
                        alert(res.msg);
                    }
                });
            },

            stockTableDataPagingChange(val) {
                let that = this;
                that.stockTableDataPaging.currentPage = val;
                that.getBookStockByBookIdMethod();
            },

            stockTableDataPagingSizeChange(val) {
                let that = this;
                that.stockTableDataPaging.pageSize = val;
                that.getBookStockByBookIdMethod();
            },

            //跳转到书籍详情
            jumptoBookDetail(bookId){
                let that = this;
                if(!bookId){
                    return;
                }
                window.open("../book/bookDetail.html?bookId=" + bookId);
            },


        }
    })
</script>
</html>